<template>

  <div style="background-color: #FFFFFF; padding: 20px;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="所属接口" prop="api">
        <el-select
          style="width: 100%;"
          v-model="optionsApiId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入接口名称"
          :remote-method="getApiInfo"
          :loading="loading">
          <el-option
            v-for="(item,index) in api_info"
            :key="index"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建人" prop="creator">
        <el-select
          style="width: 100%;"
          v-model="optionsCreatorId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入创建人"
          :remote-method="getCreatorInfo"
          :loading="loading">
          <el-option
            v-for="(item,index) in creator_info"
            :key="index"
            :label="item.username"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>

      <el-form-item label="KEY" prop="obj_key">
        <el-input v-model="ruleForm.obj_key" style="width: 90%;float: left;"></el-input>
        <div style="width: 10%;float: right;">
          <el-button type="primary" @click="getRandomString()">获取</el-button>
        </div>
      </el-form-item>

      <el-form-item label="描述" prop="describe">
        <el-input v-model="ruleForm.describe"></el-input>
      </el-form-item>

      <el-form-item label="步骤数据" prop="steps_data">
        <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 15}" placeholder="请输入内容"
                  v-model="ruleForm.steps_data"></el-input>
      </el-form-item>

      <el-form-item label="URL" prop="url">
        <el-input v-model="ruleForm.url"></el-input>
      </el-form-item>

      <el-form-item label="请求方式">
        <el-select v-model="ruleForm.api_type" placeholder="请求方式" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsApiType"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="请求头模板" prop="header_template">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入内容"
                  v-model="ruleForm.header_template"></el-input>
      </el-form-item>

      <el-form-item label="请求体sql" prop="sql_detail_body">
        <el-select
          style="width: 100%;"
          v-model="optionsSqlDetailBodyId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入"
          :remote-method="getSqlDetailBodyInfo"
          :loading="loading">
          <el-option
            v-for="(item,index) in sql_detail_body_info"
            :key="index"
            :label="item.sql_title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="请求sql" prop="body_sql_str" v-if="optionsSqlDetailBodyId.length===1">
        <el-input disabled type="textarea" :autosize="{ minRows: 2, maxRows: 15}" placeholder="请输入内容"
                  v-model="this.body_sql_str"></el-input>
      </el-form-item>

      <el-form-item label="请求sql模板" prop="request_sql_template" v-if="optionsSqlDetailBodyId.length===1">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入内容"
                  v-model="ruleForm.request_sql_template"></el-input>
      </el-form-item>

      <el-form-item label="请求体模板" prop="request_pull_template">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入内容"
                  v-model="ruleForm.request_pull_template"></el-input>
      </el-form-item>

      <el-form-item label="断言sql" prop="sql_detail_assert">
        <el-select
          style="width: 100%;"
          v-model="optionsSqlDetailAssertId"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入"
          :remote-method="getSqlDetailAssertInfo"
          :loading="loading">
          <el-option
            v-for="(item,index) in sql_detail_assert_info"
            :key="index"
            :label="item.sql_title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="断言sql" prop="assert_sql_str" v-if="optionsSqlDetailAssertId.length===1">
        <el-input disabled type="textarea" :autosize="{ minRows: 2, maxRows: 15}" placeholder="请输入内容"
                  v-model="this.assert_sql_str"></el-input>
      </el-form-item>

      <el-form-item label="断言sql模板" prop="assert_sql_template" v-if="optionsSqlDetailAssertId.length===1">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入内容"
                  v-model="ruleForm.assert_sql_template"></el-input>
      </el-form-item>

      <el-form-item label="断言模板" prop="assert_pull_template">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入内容"
                  v-model="ruleForm.assert_pull_template"></el-input>
      </el-form-item>

      <el-form-item label="请求头" prop="header">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入内容" :disabled="true"
                  v-model="ruleForm.header"></el-input>
      </el-form-item>

      <el-form-item label="请求体" prop="body">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入内容" :disabled="true"
                  v-model="ruleForm.body"></el-input>
      </el-form-item>

      <el-form-item label="响应数据" prop="response">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入内容" :disabled="true"
                  v-model="ruleForm.response"></el-input>
      </el-form-item>

      <el-form-item label="断言数据" prop="assert_data">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入内容" :disabled="true"
                  v-model="ruleForm.assert_data"></el-input>
      </el-form-item>

      <el-form-item label="对比结果" prop="result_data">
        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="" :disabled="true"
                  v-model="ruleForm.result_data"></el-input>
      </el-form-item>

      <el-form-item label="测试结果显示" prop="show_status">
        <el-switch
          style="float: left;"
          v-model="ruleForm.show_status"
          active-text="全部信息"
          inactive-text="错误信息">
        </el-switch>
      </el-form-item>

      <el-form-item label="执行状态" prop="results">
        <el-select disabled v-model="ruleForm.results" placeholder="请选择状态" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsResults"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="请选择状态" style="width: 100%;">
          <el-option
            v-for="(item,index) in optionsCommon"
            :key="index"
            :label="item.value"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="submitForm()">保存</el-button>
        <el-button type="primary" @click="testObj()">测试</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
  export default {
    name: 'AddApiDetail',
    data() {
      return {
        optionsCommon: [],  // 存储CommonChoices实际数据的列表
        optionsApiType: [],  // 存储ApiTypeChoices实际数据的列表
        optionsResults: [],  // 执行状态

        // 编辑时将要获取的数据
        EditData: {},  // 将要编辑的所有数据
        EditUrl: this.$http.apiDetailURL,  // get编辑的URL
        EditIdStr: 'apiDetail_id',  // 模块id字符串
        pushObjName: 'ApiDetail',  // 成功后跳转的路由

        action: this.$http.HOST,
        // 文件字段
        fields: ['result_data', 'assert_data', 'response', 'body'],
        notSubmitFields: [
          'results',
          'result_data',
          'header',
          'body',
          'assert_data',
          'response',
          'api_info',
          'project_info',
          'db_info',
          'creator_info',
          'sql_body_info',
          'sql_assert_info',
        ],

        // 默认不是FormData格式
        FormDataStatus: false,

        loading: false,
        // 其它表数据,搜索到的全部数据
        api_info: [], // 用户列表，获取1000条项目数据
        project_info: [],  // 项目信息
        creator_info: [], // 用户列表，获取1000条项目数据
        db_info: [],  // 数据库信息
        sql_detail_body_info: [], // 请求体sql明细
        sql_detail_assert_info: [], // 断言sql明细

        // 编辑和添加选中的数据id
        optionsApiId: [],
        optionsProjectId: [],
        optionsCreatorId: [],
        optionsSqlDetailBodyId: [],
        optionsSqlDetailAssertId: [],

        assert_sql_str:'',
        body_sql_str:'',

        ruleForm: {
          id: '',
          api: '',//所属接口
          creator: '',  // 创建人
          title: '',//标题
          steps_data: '',
          obj_key: '',
          describe: '', // 接口描述
          url: '', //url地址 # 每次用例执行时更新
          api_type: '',//请求方式
          sql_detail_body: '',  // 接口明细请求体sql
          sql_detail_assert: '',  // 接口明细断言sql
          header_template: '', //请求头模板
          request_sql_template: '', //请求sql入参模板
          request_pull_template: '', //请求出参模板
          assert_sql_template: '', //断言sql入参模板
          assert_pull_template: '', //断言出参模板
          header: '', //请求头
          body: '', //请求体
          response: '', //响应数据
          assert_data: '', //断言数据
          result_data: '', //对比结果
          results: 3,//执行状态
          show_status: true,  // 是否显示所有测试结果
          // test_status: '',  // 可否单独测试
          status: '',//状态

          api_info: {}, // 接口数据
          project_info: {}, // 项目
          db_info: {},  // 数据库信息
          creator_info: {}, // 用户
          sql_body_info: {}, // 请求体sql数据
          sql_assert_info: {}, // 断言sql数据
        },  //
        rules: {}
      };
    },
    created() {
      this.getEditData();   // get回将要编辑的数据
      this.optionsCommon = this.getChoices.common;
      this.optionsApiType = this.getChoices.api.api_type;
      this.optionsResults = this.getChoices.results;

    },
    methods: {
      // 测试sql功能
      testObj() {
        let queryData = {
          id: this.ruleForm.id
        };
        this.$http.getApiFunc(this.$http.getApiStatus)(this.$http.testApiDetailURL, queryData)
          .then(res => {
            this.$alert(res.data.msg, '提示', {
              confirmButtonText: '确定'
            });
            // this.$router.go(0);
          })
          .catch(err => {
            console.log(err);
          });
      },

      //
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      submitForm() {
        // this.FormDataStatus = true;
        this.$myTool.submitForm(this);
      },

      // get回将要编辑的数据
      getEditData() {
        this.$myTool.getEditData(this);
      },

      // 获取随机字符串
      getRandomString() {
        let queryDict = {
          str_len: 16
        };
        this.$myTool.getRandomString(this, queryDict)
      },

      // 接口信息
      getApiInfo(query) {
        this.$myTool.getObjList(this, this.$http.apiURL, this.api_info, query)
      },
      // 项目信息搜索
      getProjectInfo(query) {
        this.$myTool.getObjList(this, this.$http.projectURL, this.project_info, query)
      },
      // 用户信息
      getCreatorInfo(query) {
        this.$myTool.getObjList(this, this.$http.accountURL, this.creator_info, query)
      },
      // 请求体sql信息
      getSqlDetailBodyInfo(query) {
        this.$myTool.getObjList(this, this.$http.sqlURL, this.sql_detail_body_info, query)
      },
      // 断言sql信息
      getSqlDetailAssertInfo(query) {
        this.$myTool.getObjList(this, this.$http.sqlURL, this.sql_detail_assert_info, query)
      },
    },
    watch: {

      'ruleForm.api_info': function (value) {
        if (value) {
          this.optionsApiId.push(value.id);
          this.api_info.push(value);
        } else {
          this.optionsApiId = [];
          this.api_info = [];
        }
      },
      'ruleForm.project_info': function (value) {
        if (value) {
          this.optionsProjectId.push(value.id);
          this.project_info.push(value);
        } else {
          this.optionsProjectId = [];
          this.project_info = [];
        }
      },
      'ruleForm.creator_info': function (value) {
        if (value) {
          this.optionsCreatorId.push(value.id);
          this.creator_info.push(value);
        } else {
          this.optionsCreatorId = [];
          this.creator_info = [];
        }
      },

      'ruleForm.sql_body_info': function (value) {
        if (value) {
          this.optionsSqlDetailBodyId.push(value.id);
          this.sql_detail_body_info.push(value);
        } else {
          this.optionsSqlDetailBodyId = [];
          this.sql_detail_body_info = [];
        }
      },
      'ruleForm.sql_assert_info': function (value) {
        if (value) {
          this.optionsSqlDetailAssertId.push(value.id);
          this.sql_detail_assert_info.push(value);
        } else {
          this.optionsSqlDetailAssertId = [];
          this.sql_detail_assert_info = [];
        }
      },
      optionsApiId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
        this.ruleForm.api = value[0] ? value[0] : null
      },
      optionsProjectId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
        this.ruleForm.project = value[0] ? value[0] : null
      },
      optionsCreatorId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
        this.ruleForm.creator = value[0] ? value[0] : null
      },
      optionsSqlDetailBodyId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
        this.ruleForm.sql_detail_body = value[0] ? value[0] : null;
        if (value[0]) {
          this.sql_detail_body_info.forEach(item=>{
            if (value[0] === item.id) {
              this.body_sql_str = item.sql_template;
            }
          })
        }else {
          this.body_sql_str = '';
          this.ruleForm.request_sql_template = null;
        }
      },
      optionsSqlDetailAssertId: function (value) {
        value = this.$myTool.delLenghtList(1, value, this);
        this.ruleForm.sql_detail_assert = value[0] ? value[0] : null;
        if (value[0]) {
          this.sql_detail_assert_info.forEach(item=>{
            if (this.ruleForm.sql_detail_assert === item.id) {
              this.assert_sql_str = item.sql_template;
            }
          })
        }else {
          this.assert_sql_str = '';
          this.ruleForm.assert_sql_template = null;
        }
      },
    },


    computed: {
      getChoices() {
        return this.$store.state.choicesInfo
      }
    },

  }
</script>
